<template>
  <a-card class="card select-none" :class="{ 'card-select': select }" @click="emit('on-click')">
    <h3 class="big-1 mb-0">{{ title }}</h3>
    <div class="text-center">
      <span class="text-8xl red mb-0 align-baseline">{{ count }}</span>
      <span class="mb-0 text-3xl red font-bold align-text-bottom">%</span>
    </div>
    <template #actions>
      <div class="red font-bold select-none hover-red">
        <span v-if="select">已选择</span>
        <span v-else>点击选择</span>
      </div>
    </template>
  </a-card>
</template>

<script lang="ts" setup>
interface Props {
  title: string
  count: number
  select: boolean
}

interface Emits {
  (e: 'on-click'): void
}

defineProps<Props>()

const emit = defineEmits<Emits>()
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  width: 275px;
  border: 1.5px solid #ffd0d0;
  transition: all 0.2s ease;

  ::v-deep(.ant-card-body) {
    padding: 15px;
  }

  ::v-deep(.ant-card-actions) {
    transition: all 0.2s ease;
    border-top: 1.5px solid #ffd0d0;
  }

  ::v-deep(.ant-card-actions > li:not(:last-child)) {
    border-right: 1.5px solid #ffd0d0;
  }

  .title {
    font-weight: bold;
    font-size: 12px;
    color: rgb(165 165 165);
  }

  .main-title {
    color: rgb(183 87 87);
    font-size: 13px;
  }

  .big-1 {
    font-size: 30px;
    font-weight: bold;
    color: #ff6350;
  }

  .big-2 {
    font-size: 15px;
    font-weight: bold;
  }

  .red {
    color: #ff6350;
  }

  .black {
    color: #666;
  }
}

.card-select {
  background: #ff4d4f;

  .title {
    color: #fff;
  }

  .main-title {
    color: #fff;
  }

  .big-1 {
    color: #fff;
  }

  .red {
    color: #fff;
  }

  .black {
    color: #fff;
  }

  .hover-red {
    &:hover {
      color: #fff;
    }
  }

  ::v-deep(.ant-card-actions) {
    background: #ff4d4f;
  }
}

.hover-red {
  &:hover {
    color: red;
  }
}
</style>
